import $ from 'jquery';
import React from 'react';
import { findDOMNode } from 'react-dom';
import Modal from 'lib/components/Modal.jsx';
import ReactSlick from 'react-slick';
import imgSrc from 'lib/util/ImageSource';

// Tips: 不要试图改成函数式组件
class PrevArrow extends React.Component {
  render() {
    return (
      <div className="mask-prev">
        <button className="slick-prev" ref="previous" onClick={ this.props.onClick }></button>
      </div>
    );
  }
}

class NextArrow extends React.Component {
  render() {
    return (
      <div className="mask-next">
        <button className="slick-next" ref="next" onClick={ this.props.onClick }></button>
      </div>
    );
  }
}

class CarouselModal extends Modal {

  constructor(props, context) {
    super(props, context);

    this.state = {
      current: props.index + 1
    };
  }

  handleChange(index) {
    this.setState({
      current: index + 1
    });
  }

  componentWillReceiveProps(nextProps) {
    this.state.current = nextProps.index + 1;
  }

  renderHeader() {
    let current = this.props.sources[this.state.current - 1] || {};

    return (
      <div className="modal-heading">
        <h4 className="module-name">{ current.title }</h4>
        <div className="current-total">{ this.state.current } / { this.props.sources.length }</div>
      </div>
    );
  }

  renderBody() {
    return (
      <ReactSlick
        ref="carousel"
        className="carousel"
        initialSlide={ this.props.index }
        lazyLoad={ false }
        afterChange={ this.handleChange.bind(this) }
        touchMove={ false }
        prevArrow={ PrevArrow }
        nextArrow={ NextArrow }
        >
          {
            this.props.sources.map((item, index) => {
              return (
                <div key={ index }>
                  <img src={ imgSrc(item.src) } width="100%" alt={ item.description } />
                  <p className="module-desc">{ item.description } { item.link ? <a target="_blank" href={ item.link }>查看详情</a> : null }</p>
                </div>
              );
            })
          }
      </ReactSlick>
    );
  }

  renderFooter() {
    return (
      <div>
        <a href="javascript:;" className="btn-link" onClick={ this.close }>取消浏览</a>
        <a href="http://www.oneapm.com/mi/price.html" target="_blank" className="btn-green">用户升级</a>
      </div>
    );
  }
}

CarouselModal.defaultProps = {
  index: 0,
  sources: [],
  className: 'carousel-modal',
  draggable: false
};

export default CarouselModal;
